import { useEffect, useState } from 'react';
import { Row, Col, Modal, Badge } from 'antd';
import { useModel } from 'umi';
import ProList from '@ant-design/pro-list';
import ProDescriptions from '@ant-design/pro-descriptions';
import useRequest from '@/utils/useRequestWrapper';
import { getClassAssessHistory } from '@/services/ant-design-pro/api';
import styles from './index.less';

export default ({ visible, onClose }) => {
  const { token } = useModel('global');
  const [list, setList] = useState([]);
  const { data, run, loading } = useRequest(getClassAssessHistory, { manual: true });

  useEffect(() => {
    if (visible) {
      run(token.xxNo, token.bjNo);
    }
  }, [visible]);

  useEffect(() => {
    if (data?.status === true) {
      setList(data.result);
    } else {
      setList([]);
    }
  }, [data]);

  return (
    <Modal
      afterClose={() => setList([])}
      open={visible}
      title={`班级评价记录`}
      footer={null}
      width={600}
      centered
      bodyStyle={{ padding: 15 }}
      onCancel={onClose}
    >
      <Row className={styles.wrapper} style={{ padding: 0 }} justify="center">
        <Col span={24}>
          <ProList
            rowKey="id"
            dataSource={loading ? [] : list}
            loading={loading}
            className="hide-scrollbar"
            style={{ maxHeight: 400 }}
            metas={{
              extra: {
                dataIndex: 'score',
                render: (text, record) =>
                  record.score > 0 ? (
                    <Badge style={{ backgroundColor: '#52c41a' }} count={`+${record.score}`} />
                  ) : (
                    <Badge count={record.score} />
                  ),
              },
              description: {
                dataIndex: 'indexName',
                render: (text, record, index) => (
                  <ProDescriptions column={1}>
                    <ProDescriptions.Item className="header">{`${index + 1}、${
                      record.itemName
                    }`}</ProDescriptions.Item>
                    <ProDescriptions.Item>{record.indexName}</ProDescriptions.Item>
                    <ProDescriptions.Item>{`备注：${record.memo || ''}`}</ProDescriptions.Item>
                    <ProDescriptions.Item className="footer">{`${record.addOn}-${record.teacherName}`}</ProDescriptions.Item>
                  </ProDescriptions>
                ),
              },
            }}
          />
        </Col>
      </Row>
    </Modal>
  );
};
